<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.static{
				position: static;
				border: 3px solid #73AD21;
			}
			
			.pos_fixed{
				position: fixed;
				top: 30px;
				right: 5px;
			}
			
			.pos_left{
				position: relative;
				left: -20px;
			}
			
			.pos_right{
				position: relative;
				left: 20px;
			}
			
			.absolute{
				position: absolute;
				left: 100px;
				top: 150px;
			}
			
			.sticky {
				position: sticky;
				top: 0;
				background-color: green;
				border: 2px solid #4CAF50;
			}
			
			body{
				height: 2000px;
			}
			
		</style>
	</head>
	<body>
		<!--static 定位-->
		<div class="static"></div>
		<!--fixed 定位-->
		<p class="pos_fixed">aaaa</p>
		<!--relative 定位-->
		<h2 class="pos_left">aaa</h2>
		<h2 class="pos_right">bbb</h2>
		<!--absolute 定位-->
		<h2 class="absolute">vvv</h2>
		<!--sticky 定位-->
		<div class="sticky">
			aaaaaa
		</div>
	</body>
</html>